<template>
    <div class="w-full h-full">
        <div class="m-4 flex justify-center">
            <el-button>
                <el-icon class=" cursor-pointer text-blue-500 " @click="startRecord">
                    <Microphone />
                </el-icon>
            </el-button>
            <el-button>
                <el-icon class=" cursor-pointer text-red-400" @click="stopRecord">
                    <Mute />
                </el-icon>
            </el-button>
            <el-button>
                <el-icon class=" cursor-pointer text-green-400" @click="send">
                    <Select />
                </el-icon>
            </el-button>
        </div>
        <div class="grid grid-cols-3 gap-4 w-5/6 m-auto">
            <div v-for="item in content">
                <word-card :text="item.text" :pronunciation="item.pron" :result="item.result"></word-card>
            </div>
        </div>
    </div>
</template>
 
<script setup>
import { ref, h } from 'vue'
import { useRoute } from 'vue-router';
import { api } from '../../boot/api';
import { ElMessage, ElNotification, ElLoading } from 'element-plus';
import WordCard from '../../components/WordCard.vue';
import Recorder from 'js-audio-recorder';
let recorder = new Recorder(
    {
        sampleBits: 16,                 // 采样位数，支持 8 或 16，默认是16
        sampleRate: 16000,              // 采样率，支持 11025、16000、22050、24000、44100、48000，根据浏览器默认值，我的chrome是48000
        numChannels: 1,
    }
);
let audios = ref([])
let duration = ref(0)
let blobData = ref()
let totalDuration = ref(0)
const route = useRoute()
let path = route.query.path
let content = ref('')
api({
    url: '/get_read_text/' + path,
    method: 'get',
}).then(res => {
    let response = res.data
    content.value = response.data
})


const openNotification = () => {
    ElNotification({
        title: '音频',
        message: h('div',
            {
                class: 'w-52 h-full'
            },
            [
                h(
                    'audio', {
                    src: audios.value.map(elm => elm.url),
                    class: 'w-52 h-8',
                    controls: 'controls',
                }
                )
            ]

        ),
        duration: 0
    })
}
const startRecord = () => {
    recorder.start().then(() => {
        console.log('开始录音');
        ElMessage.success('开始录音')
    }).catch((e) => {
        console.error(e);
    });
}
const stopRecord = () => {
    recorder.stop()
    totalDuration.value = recorder.duration
    let blob = recorder.getWAVBlob();
    blobData.value = blob
    audios.value.push({
        name: '音频1',
        url: URL.createObjectURL(blob)
    })
    ElMessage.success('结束录音')
    openNotification()
}
let send = () => {
    let formData = new FormData();
    formData.append('audio', blobData.value);
    let words = []
    for (let i = 0; i < content.value.length; i++) {
        words.push(content.value[i].text)
    }
    formData.append('words', words.join(','));
    ElLoading.service({
        lock: true,
        text: '正在评测中',
        background: 'rgba(0, 0, 0, 0.7)'
    })
    api({
        url: 'judge_pron',
        method: 'post',
        data: formData
    }).then(res => {
        let response = res.data
        console.log(response)
        let result = response.data
        // convert result to Object 
        let obj = {}
        result.forEach(item => {
            obj[item.content] = item.total_score
        })
        content.value.forEach(item => {
            item.result = obj[item.text]
        })
        ElLoading.service().close()
    })
}
</script> 
 
<style scoped></style>